/**
 * @Author: ZFEason
 * @Date: 2023-07-11 14:00:01
 * @LastEditors: ZFEason
 * @LastEditTime: 2023-07-19 14:39:06
 * @FilePath: /ift-economy-network-h5/src/pages/storage-situation/ProjectDetail/index.tsx
 * @Description:
 */

import { useEffect, useMemo, useState, useRef } from "react";
import { Checkbox, Form, Space, Tag, Popup, Divider, Toast, Ellipsis, Picker } from "antd-mobile";
import { RightOutline, DownOutline, AddOutline, UpOutline, UpCircleOutline } from 'antd-mobile-icons'
import dayjs from "dayjs";
import { list } from "./data";
import { useNavigate, useSearchParams } from "react-router-dom";
import Styles from "./index.module.less";
import FormTable from "./Components/FormTable";
import GroupPopup from "./Components/GroupPopup";
import lineTop from "@/assets/image/line_top.png";
import lineFirst from "@/assets/image/line_first.png";
import lineBottom from "@/assets/image/line_bottom.png";
import editFeedback from "@/assets/image/edit_feedback.png";
import editFirstIcon from "@/assets/image/edit_icon_first.png";
import langdingIcon from '@/assets/image/landingIcon.png'
import lockIcon from "@/assets/image/lock_icon.png";
import talkIcon from "@/assets/image/talk_icon.png";
import landingMessage from '@/assets/image/landing_icon.png'
import settingIcon from "@/assets/image/setting_icon.png";
import noDataIcon from '@/assets/image/no_table.png'
import { getPurposeInfo, getPurposeLabelList, getSaveTag, getTeamChange, changeTeam, getOperateInfo } from '@/service/projectDetail'
import { useThrottleFn } from 'ahooks'
import { getRsaDecrypt } from '@/utils/entry'
import res from "antd-mobile-icons/es/AaOutline";

const Index: React.FC<any> = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [search] = useSearchParams();
  const currentType = search?.get('type') || 1

  const [isShow, setIsShow] = useState<any>(false);
  const [tabKey, setTabKey] = useState<any>('clue');
  const [detailData, setDetailData] = useState<any>({});
  const [preliminaryData, setPreliminaryData] = useState<any>([]);
  const [negotiationList, setNegotiationList] = useState<any>([])
  const [isOpenTags, setIsOpenTags] = useState<boolean>(false)
  const [allTagList, setAllTagList] = useState<any>([]);
  const [personData, setPersonData] = useState<any>({}); // 人员
  const [incomeData, setIncomeData] = useState<any>({}); // 收入
  const [taxData, setTaxData] = useState<any>({}); // 纳税
  const [personColumns, setPersonColumns] = useState<any>([]); // 人员 table 数据索引
  const [incomeColumns, setIncomeColumns] = useState<any>([]); // 收入 table 数据索引
  const [taxColumns, setTaxColumns] = useState<any>([]); // 纳税 table 数据索引
  const [moreMessage, setMoreMessage] = useState<boolean>(false)
  const [visible, setVisible] = useState(false) // 现在切换企业弹窗
  const [currentId, setCurrentId] = useState<any>() // 落地注册当前选择的企业id
  const [companyList, setCompanyList] = useState<any>([]) // // 落地注册所有企业列表
  const [currentDetails, setCurrentDetails] = useState<any>({})  // 当前选择的企业信息

  const initData = useMemo(() => list, []);
  const searchId = search?.get('id')
  const [negotiationAddQuery, setNegotiationAddQuery] = useState<any>(`id=${searchId}`)
  const [projectInfo, setProjectInfo] = useState<any>({
    planInvestVolume: null,
    companyName: "",
    settledAppeal: '',
    turnDept: '',
    projectName: '',
    lastJointTime: "",
    leaderName: "",
    teams: [],
  })
  const [currentStatus, setCurrentStatus] = useState<any>('')

  const getPurposeData = async () => {
    const res: any = await getPurposeInfo({ id: searchId })
    const { code, data } = res?.data
    if (code == 0) {
      let { projectName, companyName, settledAppeal, planInvestVolume, turnDept, teams, lastJointTime, jointLeader1, jointLeader2, jointLeader3, status, companyList } = data
      setCurrentStatus(status)
      let jointLeaderObj = {
        jointLeader1: `市领导：${jointLeader1}`,
        jointLeader2: `区领导：${jointLeader2}`,
        jointLeader3: `局领导：${jointLeader3}`
      }
      let jointLeaderArr: any = []
      for (let key in jointLeaderObj) {
        if (!!data[key]) {
          jointLeaderArr.push(jointLeaderObj[key])
        }
      }
      setProjectInfo((params: any) => {
        params.projectName = projectName
        params.companyName = companyName
        params.settledAppeal = settledAppeal
        params.planInvestVolume = planInvestVolume
        params.turnDept = turnDept
        params.teams = teams
        params.lastJointTime = lastJointTime
        params.leaderName = jointLeaderArr.join('，')
        return { ...params }
      })
      setDetailData({
        ...data,
        businessForecasting: [
          ["", data.operationForecastTax1, data.operationForecastRevenue1],
          ["", data.operationForecastTax2, data.operationForecastRevenue2],
          ["", data.operationForecastTax3, data.operationForecastRevenue3],
        ],
        operationStateTax: [
          ["", data.operationStateTax1, data.operationStateRevenue1],
          ["", data.operationStateTax2, data.operationStateRevenue2],
          ["", data.operationStateTax3, data.operationStateRevenue3],
        ],
      });
      let companyLists: any = []
      companyList?.forEach((item: any) => {
        companyLists?.push({
          label: item.registerCompanyName || item.creditCode,
          value: item.id
        })
      })
      setCompanyList(companyLists || [])
      setPreliminaryData(data?.buttJointHandleList)
      setNegotiationList(data?.negotiationHandleList)
      setCurrentId(data?.companyList?.[0]?.id || '')
      const currentDetails = companyList?.find((item: any) => item?.id == data?.companyList?.[0]?.id) || {}
      setCurrentDetails(currentDetails)
      const setAddQuery = (item: any) => {
        let {
          governmentContacts,
          governmentContactsPhone,
          jointContacts,
          jointContactsPhone,
          jointContactsPost
        } = item
        setNegotiationAddQuery(`id=${searchId}&governmentContacts=${governmentContacts}&governmentContactsPhone=${governmentContactsPhone}&jointContacts=${jointContacts}&jointContactsPhone=${jointContactsPhone}&jointContactsPost=${jointContactsPost}`)
      }
      if (data?.negotiationHandleList && data?.negotiationHandleList.length != 0) {
        setAddQuery(data.negotiationHandleList[0])
      } else if (data?.buttJointHandleList && data?.buttJointHandleList.length != 0) {
        setAddQuery(data.buttJointHandleList[0])
      }
      teams && IdGetTeamChange(teams.map((item: any) => {
        let id: any = []
        item.teamMember.map((value: any) => {
          id.push(`${item.deptName}:${value}`)
        })
        return { deptName: item.deptName, id }
      }))
    }
  }
  const [teamData, setTeamsData] = useState<any>([])
  const IdGetTeamChange = async (checkedTeams: any = []) => {
    const res: any = await getTeamChange(searchId)
    const { code, data } = res?.data
    if (code == 0 && data && data.length != 0) {
      setTeamsData(data)
    }
  }

 useEffect(() => {
  const currentDetails = detailData?.companyList?.find((item: any) => item?.id == currentId) || {}
  setCurrentDetails(currentDetails)
 },[currentId])

  useEffect(() => {
    getPurposeData()
  }, []);

  const getOperateData = async () => {
    const result: any = await getOperateInfo({
      id: searchId,
      creditCode: currentDetails?.creditCode
    })
    const res:any = getRsaDecrypt(result?.data)
    const { code, data } = res
    if (code == 0) {
      const personList = data.practitionerTotal || [];
      const incomeList = data.tradeIncomeTotal || [];
      const taxList = data.taxAmountTotal || [];
      // 需要通过接口字段来设置 table columns 数据
      if (personList && personList.length > 0) {
        const personCol = [];
        for (const item of personList) {
          personCol.push({
            title: item.year,
            key: item.year,
          });
        }
        setPersonColumns(personCol);
      }
      if (incomeList && incomeList.length > 0) {
        const incomeCol = [];
        for (const item of incomeList) {
          incomeCol.push({
            title: item.year,
            key: item.year,
          });
        }
        setIncomeColumns(incomeCol);
      }
      if (taxList && taxList.length > 0) {
        const taxCol = [];
        for (const item of taxList) {
          taxCol.push({
            title: item.year,
            key: item.year
          });
        }
        setTaxColumns(taxCol);
      }

      // 三大类的 table 数据需要自行转换指定
      const initPersonData: any = {};
      const initIncomeData: any = {};
      const initTaxData: any = {};
      if (personList && personList.length > 0) {
        for (const item of personList) {
          initPersonData[item.year] = item.total;
        }
        setPersonData(initPersonData);
      }
      if (incomeList && incomeList.length > 0) {
        for (const item of incomeList) {
          initIncomeData[item.year] = item.total;
        }
        setIncomeData(initIncomeData);
      }
      if (taxList && taxList.length > 0) {
        for (const item of taxList) {
          initTaxData[item.year] = item.total;
        }
        setTaxData(initTaxData);
      }
    }
  }

  useEffect(() => {
    if (tabKey == 'landing') {
      getOperateData()
    }
  }, [tabKey])

  // 涉及到编辑，数据会有更新
  useEffect(() => {
    if (isOpenTags) {
      getTagList()
    }
  }, [isOpenTags])


  const getTagList = async () => {
    const res: any = await getPurposeLabelList(searchId);
    const { data, code } = res?.data;
    if (code == 0) {
      setAllTagList(data || []);
    }
  };

  const progressList: any = [
    { key: "clue", label: "线索收集" },
    { key: "joint", label: "初步对接" },
    { key: "penetrate", label: "深入洽谈" },
    { key: "landing", label: '落地注册' }
  ];

  const { run: handleScroll } = useThrottleFn(
    () => {
      let currentKey = progressList[0].key
      for (const item of progressList) {
        const element = document.getElementById(`${item.key}`)
        if (!element) continue
        const rect = element.getBoundingClientRect()
        if (rect.top <= 53) {
          currentKey = item.key
        } else {
          break
        }
      }
      setTabKey(currentKey)
    },
    {
      leading: true,
      trailing: true,
      wait: 100,
    }
  )

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  const renderTag = (item: any) => {
    const tagList = item?.split(',')
    return <div className={Styles.tag_list}>
      {tagList?.map((element: any, index: any) => {
        return (
          <div key={index} className={Styles.tag_font}>
            {element}
          </div>
        );
      })}
    </div>
  }
  const nextStepText: any = {
    1: '继续对接',
    2: '转为深入洽谈(拟引进)',
    3: '终止'
  }

  const auditStatusObj: any = {
    1: {
      text: '待审核',
      color: "#ccc"
    },
    2: {
      text: '审核通过',
      color: "green"
    },
    3: {
      text: '审核驳回',
      color: "red"
    }
  }

  // 标签选择处理
  const processingLabel = (item: any, Index: number, index: number) => {
    let currentItem = item;
    let currentTagList = allTagList;
    let labelLibrarys = item?.labelLibrarys;
    const current = item?.labelLibrarys?.findIndex((element: any) => {
      if ([1, 2].includes(element.isLabelChecked)) {
        return element.labelId;
      }
    });

    if (item.groupType == 1) {
      labelLibrarys = labelLibrarys.map((item: any) => {
        return { ...item, isLabelChecked: 0 };
      });
    }
    if (current == Index && item.groupType == 1) {
      // 处理单选当前选择的是已经高亮的标签
      labelLibrarys[Index].isLabelChecked =
        labelLibrarys[Index].isLabelChecked == 0
          ? 2
          : !labelLibrarys[Index].isLabelChecked;
    }
    labelLibrarys[Index].isLabelChecked =
      labelLibrarys[Index].isLabelChecked == 0
        ? 2
        : Number(!labelLibrarys[Index].isLabelChecked);
    currentTagList[index] = {
      ...currentItem,
      labelLibrarys: labelLibrarys,
    };

    setAllTagList([...currentTagList]);
  };

  // 保存标签接口
  const onFinish = async () => {
    let labelInfoSaveList: any = [];

    allTagList?.forEach((element: any) => {
      element?.labelLibrarys?.forEach((item: any) => {
        if ([1, 2].includes(item.isLabelChecked)) {
          labelInfoSaveList.push({
            labelId: item.labelId,
            groupId: element.id,
          });
        }
      });
    });

    const param = {
      labelInfoSaveList,
      infoId: searchId,
    };
    const res: any = await getSaveTag(param);

    if (res.data?.code == 0) {
      getPurposeData()
      setIsOpenTags(false)
    }
  };
  const [GroupPopupVis, setGroupPopupVis] = useState(false)
  const changeGroup = async (data: any) => {
    const res: any = await changeTeam({
      id: searchId,
      teams: data,
      changeType: 1,
    })
    let { code, msg } = res.data
    if (code == 0) {
      getPurposeData()
    }
    Toast.show({ content: msg })
  }
  const openGroupPopup = (e: any) => {
    setGroupPopupVis(e)
  }

  const tableElement: any = (columns: any, data: any) => {
    return <div className={Styles.table_content}>
      <table border={1} className={`${Styles.container}`}>
        <thead className={`${Styles.thead}`}>
          <tr>
            {columns.map((item: any) => (
              <th className={`fontsize_14`} key={item.key}>
                {item.title}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className={`${Styles.tbody}`}>
          <tr>
            {columns.map((item: any) => (
              <td className={`fontsize_14`} key={item.key}>{data[item.key]}</td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  }

  const jointStatusTitle: any = {
    1: '接触非实控人',
    2: '接触实控人',
    3: '线上对接',
    4: '线下拜访',
    5: '实地看房/考察',
    6: '组建项目专班',
    7: '形成落户方案',
    8: '政策匹配',
    9: '选定办公地址',
    10: '签署合作协议/合作备忘录',
    11: '新注册',
    12: '区外迁入',
    13: '虚拟地址入驻',
    14: '签订落户协议',
    15: '暂未入驻办公',
    16: '已入驻办公',
    17: '暂未投产运营',
    18: '已投产运营',
    19: '暂未入库纳统',
    20: '已入库纳统'
  }

  const industryColumns = [companyList.map((item: any) => {
    return {
      label: item.label,
      value: item.value
    }
  })]
  // 防止某个模块的高度不足当前视口的高度，需要额外增加高度，不然会导致点击失效
  const innerHeight = window.innerHeight
  

  return (
    <>
      <div className={Styles.content_item}>
        <div className="d_between_center">
          <p className={Styles.title}>{projectInfo?.projectName}</p>
          <img
            style={{ width: "18px" }}
            onClick={() => setIsShow(!isShow)}
            src={isShow ? lineTop : lineBottom}
          />
        </div>
        {isShow && (
          <>
            <div className={Styles.tagsContainer}>
              <div className={Styles.tagsList}>
                {detailData?.labelName && renderTag(detailData?.labelName)}
              </div>
              <img
                className={Styles.tagsEdif}
                onClick={() => setIsOpenTags(true)}
                src={editFeedback}
              />
            </div>
            <div className={`${Styles.detail} mt_5 pt_12`}>
              企业（项目投资方）：
              <span style={{ color: "#333333" }}>
                {projectInfo?.companyName || "-"}
              </span>
              <RightOutline style={{ float: "right" }} onClick={() => navigate(`/project-baseinfo?id=${searchId}`)} />
            </div>
            <div className={`${Styles.detail} mt_5`}>
              对接领导：
              <span style={{ color: "#333333" }}>
                {projectInfo?.leaderName || "-"}
              </span>
            </div>
            {/* <div className={`${Styles.detail} mt_5`}>
                责任单位：
                <span style={{ color: "#333333" }}>
                  {projectInfo?.turnDept || "-"}
                </span>
              </div> */}
            <div className={`${Styles.detail} mt_5`}>
              招商小组：
              <DownOutline style={{ float: "right" }} />
              <div style={{ color: "#333333" }} onClick={() => { setGroupPopupVis(true) }}>
                {projectInfo?.teams?.length > 0 ?
                  <span>{projectInfo?.teams?.map((item: any, currentIndex: any) => {
                    return <span key={currentIndex}>{item?.teamMember?.map((element: any, index: any) => {
                      return <span key={index}>{`${element?.toString()}${index + 1 < item?.teamMember?.length ? '、' : ''}`}</span>
                    })}{currentIndex + 1 < item?.teams?.length ? '/' : ''}</span>
                  })}</span>
                  : '-'
                }
              </div>
            </div>
            <GroupPopup vis={GroupPopupVis} groupData={teamData} openGroupPopup={openGroupPopup} changeGroup={(e: any) => changeGroup(e)} />
            <div className={`${Styles.detail} mt_5`}>
              最后一次对接时间：
              <span style={{ color: "#333333" }}>
                {projectInfo?.lastJointTime ? dayjs(projectInfo?.lastJointTime)?.format("YYYY年MM月DD日") : "-"}
              </span>
            </div>
            <div className={`${Styles.detail} mt_5`}>
              意向投资额：
              <span style={{ color: "#333333" }}>
                {projectInfo?.planInvestVolume ? `${(projectInfo?.planInvestVolume / 10000).toFixed(2)}亿元` : "-"}
              </span>
            </div>
            <div className={`${Styles.detail} mt_5`} style={{ display: 'flex' }}>
              <p style={{ flex: 1 }}>落户诉求：</p>
              <p className={Styles.settle_title}>{projectInfo?.settledAppeal || "-"}</p>
            </div>
          </>
        )}
      </div>
      <div className={Styles.stick_content}>
        <div className={Styles.tab_list}>
          {progressList?.map((item: any, index: any) => {
            return (
              <div
                key={index}
                onClick={() => {
                  if (Number(currentType) >= index + 2) {
                    document.getElementById(`${item.key}`)?.scrollIntoView()
                    window.scrollTo({
                      top: window.scrollY - 42,
                    })
                  }
                }}
                className={`${tabKey == item.key ? Styles.current_font : Styles.default_font
                  }`}
              >
                <>
                  {item.key == tabKey ? (
                    <span className={Styles.select_font}>{index + 1}</span>
                  ) : (
                    !(index + 1 < Number(currentType)) ? <span className={`${Styles.select_font} ${Styles.gray}`}>{index + 1}</span> : <img style={{ width: "18px" }} src={lineFirst} />
                  )}
                  <span
                    className={`${item.key == tabKey && Styles.border_bottom_line
                      }`}
                  >
                    {item.label}
                  </span>
                </>
              </div>
            );
          })}
        </div>
      </div>
      {/* 线索收集 */}
      <div id='clue'>
        <div className={Styles.title_name}>
          <div>
            <img src={editFirstIcon} style={{ width: "22px" }} />
            <span>企业投资意向登记表</span>
          </div>
          <div style={{ display: "flex" }} onClick={() => navigate(`/enterprise-investment?id=${searchId}`)}>
            <img
              style={{ width: "18px", height: "18px" }}
              src={editFeedback}
            />
            <div className={Styles.edit_font}>修改</div>
          </div>
        </div>
        <div className={`fontszie_14 fw_600 color_000 pb_12 ml_12`}>
          联系方式
        </div>
        <div className="m_l_r_12">
          <div className={Styles.contact_box}>
            <div>联系人</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.contacts || "-"}
            </div>
            <div className="pt_12">联系电话</div>
            <div className="fontsize_14 pt_12">
              <a href={`tel:${detailData.contactsPhone}`}>
                {detailData.contactsPhone}
              </a>
            </div>
          </div>
        </div>
        <div className={`fontszie_14 fw_600 color_000 pb_12 ml_12 pt_12`}>
          企业（投资方）情况介绍
        </div>
        <div className="m_l_r_12">
          <div className={Styles.contact_box}>
            <div>企业（项目投资方）</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.companyName || "-"}
            </div>
            <div className="pt_12">现经营地址</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.businessAddress || "-"}
            </div>
            <div className="pt_12">主营业务</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.primaryBusiness || "-"}
            </div>
            <div className="pt_12">行业门类</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.businessClass || "-"}
            </div>
            <div className="pt_12">行业地位</div>
            <div className="fontsize_14 color_333 pt_12">
              <Checkbox.Group>
                <Space className={`d_flex ${Styles.flex_wrap}`}>
                  {initData.industryStatus.map((item: any, index: any) => (
                    <Checkbox
                      key={index}
                      disabled={true}
                      style={{
                        "--icon-size": "16px",
                        "--font-size": "14px",
                        "--gap": "8px",
                      }}
                      checked={
                        detailData?.businessStatus?.indexOf(item.label) > -1
                      }
                    >
                      {item.value}
                    </Checkbox>
                  ))}
                </Space>
              </Checkbox.Group>
            </div>
            <div className="pt_12">经营情况</div>
            <div className="fontsize_14 color_333 pt_12">
              <FormTable
                readOnly={true}
                theadData={initData.operationData.theadData}
                titleColumnData={initData.operationData.titleColumnData}
                extraData={detailData?.operationStateTax}
                extraTd={(item: any) =>
                  (item || item !== undefined) && (
                    <span className={`color_ccc ml_20`}>{item}</span>
                  )
                }
              />
            </div>
            <div className="pt_12">企业基本情况介绍</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.companyProfile || "-"}
            </div>
            <div className="pt_12">是否本企业（投资方）迁入福田</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.isMoved ? "是" : "否"}
            </div>
            {detailData?.isMoved == '1' && <>
              <div className="pt_12">迁入方式</div>
              <div className="fontsize_14 color_333 pt_12">
                {detailData?.isOutside ? "市外迁入" : "市内迁入"}
              </div>
            </>}
            <div className="pt_12">
              项目名称(1.项目名称由【①国别/地区名（选择）+②企业项目投资方名称（自动填充）+③投资类型（选择）】组成；2.可在输入框中自定义修改。)
            </div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.projectName || "-"}
            </div>
            {!detailData?.isMoved && (
              <>
                <div className="pt_12">新设投资项目基本情况介绍</div>
                <div className="fontsize_14 color_333 pt_12">
                  {detailData?.newProjectProfile || "-"}
                </div>
              </>
            )}
          </div>
        </div>
        <div className={`fontszie_14 fw_600 color_000 pb_12 ml_12 pt_12`}>
          预测落户后情况介绍
        </div>
        <div className="m_l_r_12">
          <div className={Styles.contact_box}>
            <div>拟落户选址</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.planSettledAddress || "-"}
            </div>
            <div>拟落户时间</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.planSettledTime || "-"}
            </div>
            <div className="pt_12">经营预测</div>
            <div className="fontsize_14 color_333 pt_12">
              <FormTable
                readOnly={true}
                theadData={initData.businessForecastingData.theadData}
                titleColumnData={
                  initData.businessForecastingData.titleColumnData
                }
                extraData={detailData?.businessForecasting}
                extraTd={(item: any) =>
                  (item || item !== undefined) && (
                    <span className={`color_ccc ml_20`}>{item}</span>
                  )
                }
              />
            </div>
            <div className="pt_12">计划未来5年投资额（万元）</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.planInvestVolume || "-"}
            </div>
            <div className="pt_12">希望哪个部门与您对接</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.hopeJointDept || "-"}
            </div>
          </div>
        </div>
        <div className={`fontszie_14 fw_600 color_000 pb_12 ml_12 pt_12`}>
          其他
        </div>
        <div className="m_l_r_12">
          <div className={Styles.contact_box}>
            <div>已享受政府政策支持情况</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.havePolicySupport || "-"}
            </div>
          </div>
        </div>
        <div className={`fontszie_14 fw_600 color_000 pb_12 ml_12 pt_12`}>
          <div style={{ position: "relative" }}>
            <span className={`fontsize_16 fw_600 color_000 ml_20`}>
              落户诉求
            </span>
            <img className={Styles.setting_font} src={settingIcon} />
          </div>
        </div>
        <div className="m_l_r_12 pb_12">
          <div className={Styles.contact_box}>
            <div>落户诉求</div>
            <div className="fontsize_14 color_333 pt_12">
              {detailData?.settledAppeal || "-"}
            </div>
          </div>
        </div>
      </div>
      {/* 初步对接 */}
      <div id='joint' style={{marginBottom: `${(Number(currentType) == 3 && !preliminaryData?.[1]?.id) ? innerHeight - 460 : 0}px`}}>
        <div className={Styles.title_name}>
          <div>
            <img src={lockIcon} style={{ width: "22px" }} />
            <span>初步对接记录</span>
          </div>
          {Number(detailData?.status) < 4 && detailData?.auditStatus != 1 ? (
            <div className={Styles.negotiationAddBtn} onClick={() => navigate(`/docking-records?id=${searchId}`)}><AddOutline />添加记录</div>
          ) : (
            ""
          )}
        </div>
        {preliminaryData?.[0]?.id > 0 ? <div>
          {preliminaryData?.map((item: any, index: any) => {
            return (
              <div
                key={index}
                style={{
                  padding: "0 12px 10px",
                }}
              >
                <div
                  style={{
                    position: "relative",
                  }}
                  className={`${!(preliminaryData?.length <= index + 1) &&
                    Styles.line_border_left
                    }`}
                >
                  <div className={Styles.circle_box} />
                  <div
                    style={{
                      fontWeight: "bolder",
                      marginLeft: "12px",
                      paddingBottom: "10px",
                      fontSize: "14px",
                    }}
                  >
                    {dayjs(item.jointDate)?.format("YYYY-MM-DD")}&nbsp;&nbsp;{item?.updateName}
                    {detailData?.auditStatus != 1 && <div style={{ display: "flex", float: "right" }} onClick={() => navigate(`/docking-records?id=${searchId}&infoId=${item.id}`)}>
                      <img
                        style={{ width: "18px", height: "18px" }}
                        src={editFeedback}
                      />
                      <div className={Styles.edit_font}>修改</div>
                    </div>}
                  </div>
                  <div
                    style={{
                      background: "white",
                      marginLeft: "14px",
                      borderRadius: "8px",
                    }}
                  >
                    <div>
                      <div className={Styles.content_box}>
                        <p className="color_666 pb_12">对接状态</p>
                        <p className="color_333 fw_500">
                          {item?.jointStatus ? (
                            <span>
                              {item?.jointStatus?.split(",").map((item: any, index: number) => {
                                return <span>{index != 0 ? `，${jointStatusTitle[item]}` : jointStatusTitle[item]}</span>;
                              })}
                            </span>
                          ) : (
                            "-"
                          )}
                        </p>
                      </div>
                      <div className={Styles.content_box} style={{ position: 'relative' }}>
                        <p className="color_666 pb_12">对接事项</p>
                        <Ellipsis
                          direction='end'
                          rows={2}
                          content={item.jointItem}
                          expandText={
                            <>
                              展开
                              <DownOutline />
                            </>
                          }
                          collapseText={
                            <>
                              收起
                              <UpOutline />
                            </>
                          }
                        />
                      </div>
                      <div className={`${Styles.content_box}`}>
                        <div className="d_between_center pb_12">
                          <span className="color_666">政府对接人</span>
                          <span className="color_333 fw_500">
                            {item.governmentContacts}
                          </span>
                        </div>
                        <div className="d_between_center">
                          <span className="color_666">政府对接人手机</span>
                          <a href={`tel:${item.governmentContactsPhone}`}>
                            {item.governmentContactsPhone}
                          </a>
                        </div>
                      </div>
                      <div className={Styles.content_box}>
                        <div className="d_between_center">
                          <span className="color_666">是否洽谈对接领导</span>
                          <span className="color_333 fw_500">
                            {item.isJointLeader ? "是" : "否"}
                          </span>
                        </div>
                        {item.isJointLeader ? <div className="mt_12">
                          <p className="color_666 pb_12">对接领导</p>
                          <p className="color_333 fw_500">
                            {(item?.jointLeader1 || item?.jointLeader2 || item?.jointLeader3) ?
                              <span>
                                {item?.jointLeader1 ? `市领导/${item?.jointLeader1}` : ''}
                                {item?.jointLeader2 ? `${item?.jointLeader1 ? '、' : ''}区领导/${item?.jointLeader2}` : ''}
                                {item?.jointLeader3 ? `${(item?.jointLeader1 || item?.jointLeader2) ? '、' : ''}局领导/${item?.jointLeader3}` : ''}
                              </span> :
                              "-"
                            }
                          </p>
                        </div> : null}
                      </div>
                      <div className={`${Styles.content_box}`}>
                        <div className="d_between_center pb_12">
                          <span className="color_666">企业联系人</span>
                          <span className="color_333 fw_500">
                            {item.jointContacts}
                          </span>
                        </div>
                        <div className="d_between_center">
                          <span className="color_666">企业联系人手机</span>
                          <a href={`tel:${item.jointContactsPhone}`}>
                            {item.jointContactsPhone}
                          </a>
                        </div>
                        {item.jointContactsPost && <div className="d_between_center pt_12">
                          <span className="color_666">企业联系人职务</span>
                          <span className="color_333 fw_500">
                            {item.jointContactsPost}
                          </span>
                        </div>}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
          :
          <div style={{ textAlign: 'center' }} className={Styles.no_data_clue}>
            <img style={{ width: '70px' }} src={noDataIcon} />
            <p className="pt_12">暂无数据</p>
          </div>}
      </div>
      {/* 深入洽谈(拟引进)记录 */}
      {Number(currentType) >= 4 && <div id='penetrate' style={{marginBottom: `${(Number(currentType) == 4 && !negotiationList?.[1]?.id) ? innerHeight - 460 : 0}px`}}>
        <div className={Styles.title_name}>
          <div>
            <img src={talkIcon} style={{ width: "22px" }} />
            <span>深入洽谈(拟引进)记录</span>
          </div>
          {detailData?.auditStatus != 1 && <div className={Styles.negotiationAddBtn} onClick={() => navigate(`/negotiation-records?${negotiationAddQuery}`)}><AddOutline />添加记录</div>}
        </div>
        {negotiationList?.[0]?.id > 0 ? <div>
          {negotiationList?.map((item: any, index: any) => {
            return (
              <div
                key={index}
                style={{ margin: '0 12px 10px' }}
                className={`${!(negotiationList?.length <= index + 1) &&
                  Styles.content_talk
                  }`}
              >
                <div
                  style={{
                    position: "relative",
                  }}
                >
                  <div className={Styles.circle_box} />
                  <div
                    style={{
                      fontWeight: "bolder",
                      marginLeft: "12px",
                      paddingBottom: "10px",
                      fontSize: "14px",
                    }}
                  >
                    {dayjs(item.jointDate)?.format("YYYY-MM-DD")}&nbsp;&nbsp;{item?.updateName}
                    {currentStatus !== 6 && item.auditStatus != 1 && <div style={{ display: "flex", float: "right" }} onClick={() => navigate(`/negotiation-records?id=${searchId}&infoId=${item.id}`)}>
                      <img
                        style={{ width: "18px", height: "18px" }}
                        src={editFeedback}
                      />
                      <div className={Styles.edit_font}>修改</div>
                    </div>}
                  </div>
                  <div
                    style={{
                      background: "white",
                      marginLeft: "14px",
                      borderRadius: "8px",
                    }}
                  >
                    <div>
                      <div className={Styles.content_box}>
                        <p className="color_666 pb_12">对接状态</p>
                        <p className="color_333 fw_500">
                          {item?.jointStatus ? (
                            <span>
                              {item?.jointStatus?.split(",").map((item: any, index: number) => {
                                return <span>{index != 0 ? `，${jointStatusTitle[item]}` : jointStatusTitle[item]}</span>;
                              })}
                            </span>
                          ) : (
                            "-"
                          )}
                        </p>
                      </div>
                      <div className={Styles.content_box}>
                        <p className="color_666 pb_12">对接事项</p>
                        <Ellipsis
                          direction='end'
                          rows={2}
                          content={item.jointItem}
                          expandText={
                            <>
                              展开
                              <DownOutline />
                            </>
                          }
                          collapseText={
                            <>
                              收起
                              <UpOutline />
                            </>
                          }
                        />
                      </div>
                      <div className={`${Styles.content_box}`}>
                        <div className="d_between_center pb_12">
                          <span className="color_666">政府对接人</span>
                          <span className="color_333 fw_500">
                            {item.governmentContacts}
                          </span>
                        </div>
                        <div className="d_between_center">
                          <span className="color_666">政府对接人手机</span>
                          <a href={`tel:${item.governmentContactsPhone}`}>
                            {item.governmentContactsPhone}
                          </a>
                        </div>
                      </div>
                      <div className={Styles.content_box}>
                        <div className="d_between_center">
                          <span className="color_666">是否洽谈对接领导</span>
                          <span className="color_333 fw_500">
                            {item.isJointLeader ? "是" : "否"}
                          </span>
                        </div>
                        {item.isJointLeader ? <div className="mt_12">
                          <p className="color_666 pb_12">对接领导</p>
                          <p className="color_333 fw_500">
                            {(item?.jointLeader1 || item?.jointLeader2 || item?.jointLeader3) ?
                              <span>
                                {item?.jointLeader1 ? `市领导/${item?.jointLeader1}` : ''}
                                {item?.jointLeader2 ? `${item?.jointLeader1 ? '、' : ''}区领导/${item?.jointLeader2}` : ''}
                                {item?.jointLeader3 ? `${(item?.jointLeader1 || item?.jointLeader2) ? '、' : ''}局领导/${item?.jointLeader3}` : ''}
                              </span> :
                              "-"
                            }
                          </p>
                        </div> : null}
                      </div>
                      <div className={`${Styles.content_box}`}>
                        <div className="d_between_center pb_12">
                          <span className="color_666">企业联系人</span>
                          <span className="color_333 fw_500">
                            {item.jointContacts}
                          </span>
                        </div>
                        <div className="d_between_center">
                          <span className="color_666">企业联系人手机</span>
                          <a href={`tel:${item.jointContactsPhone}`}>
                            {item.jointContactsPhone}
                          </a>
                        </div>
                      </div>
                      <div className={`${Styles.content_box}`}>
                        <div className="d_between_center pb_12">
                          <span className="color_666">下一步安排</span>
                          <span className="color_333 fw_500">
                            {nextStepText[item.nextStep]}
                          </span>
                        </div>
                        {item.nextStep == 2 && <>
                          {<div className="d_between_center pb_12">
                            <span className="color_666">落地注册类型</span>
                            <span className="color_333 fw_500">
                              {item.registerType == 1 ? '有注册实体' : '无注册实体'}
                            </span>
                          </div>}
                          {item.registerType == 1 && <>
                            <div className="d_between_center pb_12">
                              <span className="color_666">注册企业统一社会信用代码</span>
                              <span className="color_333 fw_500">
                                {item.creditCode}
                              </span>
                            </div>
                            <div className="d_between_center pb_12">
                              <span className="color_666">落户时间</span>
                              <span className="color_333 fw_500">
                                {item.settledBuyHouseTime}
                              </span>
                            </div>
                          </>}
                          {item.registerType == 2 && <>
                            <div className="d_between_center pb_12">
                              <span className="color_666">具体面积(㎡)</span>
                              <span className="color_333 fw_500">
                                {item.spaceSize}
                              </span>
                            </div>
                            <div className="d_between_center pb_12">
                              <span className="color_666">{item.settledType == 1 ? '购房时间' : '租房时间'}</span>
                              <span className="color_333 fw_500">
                                {item.settledBuyHouseTime}
                              </span>
                            </div>
                            <div className="pb_12">
                              <div className="color_666 pb_12">支撑证明附件</div>
                              <div>{(item?.supportProveAnnexUrl?.length ? item?.supportProveAnnexUrl : null)?.split(",")?.map((annex: string, i: number) => (
                                <a href={annex} style={{ display: 'inline-block', paddingBottom: '8px' }}>{item?.supportProveAnnexName?.split(",")[i]}</a>
                              ))}</div>
                            </div>
                          </>}
                        </>}

                      </div>
                    </div>
                  </div>
                </div>
                {item.auditStatus && <div className={Styles.examine_content}>
                  <div>
                    <div className="d_between_center pb_12">
                      <span className="color_666">审核时间</span>
                      <span className="color_333 fw_500">
                        {item?.auditTime || '-'}
                      </span>
                    </div>
                    <div className="d_between_center pb_12">
                      <span className="color_666">审核用户</span>
                      <span className="color_333 fw_500">
                        {item?.auditUserName || '-'}
                      </span>
                    </div>
                    <div className="d_between_center">
                      <span className="color_666">审核意见</span>
                      <div>
                        <Tag color={auditStatusObj?.[item?.auditStatus]?.color} className={`${item.auditOpinion && 'ml_6'}`}>{auditStatusObj?.[item?.auditStatus]?.text}</Tag>
                        <span >{item.auditOpinion}</span>
                      </div>
                    </div>
                  </div>
                </div>}
              </div>
            );
          })}
        </div>
          :
          <div style={{ textAlign: 'center' }} className={Styles.no_data_clue}>
            <img style={{ width: '70px' }} src={noDataIcon} />
            <p className="pt_12">暂无数据</p>
          </div>}
      </div>}
      {/* 落地注册信息 */}
      {Number(currentType) >= 5 && <div id='landing'>
        <div className={Styles.title_name}>
          <div>
            <img src={langdingIcon} style={{ width: "22px" }} />
            <span>落地注册信息</span>
          </div>
          {detailData?.companyList?.length > 0 && <div className={Styles.switching_enterprises} onClick={() => setVisible(true)}>切换企业<UpCircleOutline className={Styles.icon_font} /></div>}
        </div>
        <div className="m_l_r_12" style={{ position: 'relative' }}>
          <div className={Styles.contact_box}>
            <div className={Styles.landing_font}>{currentDetails?.registerCompanyName}</div>
            <div className={Styles.viewStartupContainer_top_title}>
              {detailData?.isNaseries ? <Tag color="#2db7f5" className={Styles.tag_list_font}>本地纳统</Tag> : ""}
              {detailData?.isRatepaying ? (
                <Tag color="#2db7f5" className={Styles.tag_list_font}>本地纳税</Tag>
              ) : (
                ""
              )}
              {detailData?.isSocialSecurity ? (
                <Tag color="#2db7f5" className={Styles.tag_list_font}>本地社保</Tag>
              ) : (
                ""
              )}
              {detailData?.isFourAbove ? <Tag color="#2db7f5">四上企业</Tag> : ""}
              {!detailData?.isNaseries ? (
                <Tag color="#2db7f5" className={Styles.tag_list_font}>非四上企业</Tag>
              ) : (
                ""
              )}
            </div>
            <Divider />
            <div className={Styles.landing_creditCode}>
              <div className="color_999">经营状态</div>
              <div>{currentDetails?.companyStatus || '-'}</div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999">统一社会信用代码</div>
              <div>{currentDetails?.creditCode || '-'}</div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999">营业期限</div>
              <div>{currentDetails?.operatingPeriod || '-'}</div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999">登记机关</div>
              <div>{currentDetails?.registrationAuthority || '-'}</div>
            </div>
            <div style={{ display: 'flex', paddingBottom: '12px' }}>
              <div className={Styles.landing_register}>
                <div>
                  <p>注册资本</p>
                  <p className="font_14 color_333 mt_6">{currentDetails?.registeredCapital ? `${currentDetails?.registeredCapital}万人民币` : '-'}</p>
                </div>
              </div>
              <div className={Styles.landing_register}>
                <div>
                  <p>成立日期</p>
                  <p className="font_14 color_333 mt_6">{currentDetails?.establishedTime ? dayjs(currentDetails?.establishedTime)?.format("YYYY-MM-DD") : '-'}</p>
                </div>
              </div>
              <div className={Styles.landing_register}>
                <div>
                  <p>意向投资额</p>
                  <p className="font_14 color_333 mt_6">{currentDetails?.planInvestVolume ? `${(currentDetails?.planInvestVolume / 10000).toFixed(2)}亿元` : '-'}</p>
                </div>
              </div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999" style={{ width: '20%' }}>所属行业</div>
              <div style={{ width: '70%', textAlign: `${currentDetails?.businessClass ? 'left' : 'right'}` }}>{currentDetails?.businessClass || '-'}</div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999" style={{ width: '20%' }}>注册地址</div>
              <div style={{ width: '70%', textAlign: `${currentDetails?.registeredAddress ? 'left' : 'right'}` }}>{currentDetails?.registeredAddress || '-'}</div>
            </div>
            <div className={Styles.landing_creditCode}>
              <div className="color_999" style={{ width: '20%' }}>经营范围</div>
              <div className={`${!moreMessage && Styles.businessScope_content}`} style={{ width: '70%', textAlign: `${currentDetails?.businessScope ? 'left' : 'right'}` }}>{currentDetails?.businessScope || '-'}</div>
            </div>
          </div>
          <img className={Styles.is_need_icon} onClick={() => setMoreMessage(!moreMessage)} src={moreMessage ? lineBottom : lineTop} />
        </div>
        <div style={{ padding: '27px 0 10px 12px' }}>
          <img src={landingMessage} style={{ width: "22px" }} />
          <span>投产运营信息</span>
        </div>
        <div className="m_l_r_12">
          <div className={Styles.contact_box}>
            <div className={Styles.wrap_tableTitle}>从业人员（人）</div>
            {personColumns?.length > 0 ?
              tableElement(personColumns, personData)
              :
              <div style={{ textAlign: 'center' }} className={Styles.no_data_table}>
                <img style={{ width: '70px' }} src={noDataIcon} />
                <p className="pt_12">暂无数据</p>
              </div>
            }
            <div className={`${Styles.wrap_tableTitle}`} style={{ marginTop: '16px' }}>营收入（万元）</div>
            {incomeColumns?.length > 0 ?
              tableElement(incomeColumns, incomeData)
              :
              <div style={{ textAlign: 'center' }} className={Styles.no_data_table}>
                <img style={{ width: '70px' }} src={noDataIcon} />
                <p className="pt_12">暂无数据</p>
              </div>
            }
            <div className={`${Styles.wrap_tableTitle}`} style={{ marginTop: '16px' }}>纳税额（万元）</div>
            {taxColumns?.length > 0 ?
              tableElement(taxColumns, taxData)
              :
              <div style={{ textAlign: 'center' }} className={Styles.no_data_table}>
                <img style={{ width: '70px' }} src={noDataIcon} />
                <p className="pt_12">暂无数据</p>
              </div>
            }
          </div>
        </div>
      </div>}
      <Picker
        columns={industryColumns}
        visible={visible}
        title="企业名称/统一社会信用代码"
        onClose={() => {
          setVisible(false)
        }}
        value={currentId}
        onConfirm={(v) => {
         setCurrentId(v?.[0])
        }}
      />
      <Popup
        visible={isOpenTags}
        onMaskClick={() => {
          setIsOpenTags(false)
        }}
        onClose={() => {
          setIsOpenTags(false)
        }}
        bodyStyle={{ height: '75vh', borderRadius: '12px 12px 0 0' }}
      >
        <div className={Styles.tags_list_content}>
          <div className="d_between_center">
            <span className="color_666 fw_500 fontsize_16" onClick={() => setIsOpenTags(false)}>取消</span>
            <span className="color_0F9DE9 fw_500 fontsize_16" onClick={() => onFinish()}>确定</span>
          </div>
          <Divider />
          <div style={{ height: '30px' }}>
            <span className="fontsize_12 color_666">标签说明：</span>
            <span className={Styles.tag_pre}>已贴标签</span>
            <span className={Styles.tag_none}>未贴标签</span>
            <span className={Styles.tag_selected}>选中标签</span>
          </div>
          <div className={Styles.content_center}>
            {allTagList.map((item: any, index: number) => {
              return (
                <div key={item.id}>
                  {item?.labelLibrarys.length > 0 && (
                    <div>
                      <div className="fw_500 color_333 fontsize_14">
                        <span className={Styles.item_attribute}>
                          {item.groupName}
                        </span>
                        <span>
                          {item.groupType == 1 ? "（单选）" : "（可多选）"}
                        </span>
                      </div>
                      <div className={Styles.content_tag}>
                        {item.labelLibrarys.map(
                          (Item: any, Index: number) => {
                            return (
                              <div
                                key={Item.labelId}
                                className={`${Styles.common_tag} ${Item.isLabelChecked == 1
                                  ? Styles.pre_tag
                                  : Item.isLabelChecked == 2
                                    ? Styles.select_tag
                                    : Styles.default_tag
                                  }`}
                                onClick={() =>
                                  processingLabel(item, Index, index)
                                }
                              >
                                {Item.labelName}
                              </div>
                            );
                          }
                        )}
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </Popup>
    </>
  );
};
export default Index;
